<template>
  <el-card>
    <div class="report-header">
      <h3>员工发货统计表</h3>
      <div class="report-controls">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          @change="handleDateChange"
          style="width: 250px;"
        />
        <el-button type="success" @click="exportExcel">导出Excel</el-button>
      </div>
    </div>

    <!-- 筛选条件 -->
    <div class="filter-section">
      <el-form :model="filterForm" inline>
        <el-form-item label="打包人">
          <el-select
            v-model="filterForm.packager"
            placeholder="请选择打包人"
            clearable
            style="width: 150px;"
            @change="handleFilterChange"
          >
            <el-option
              v-for="packager in packagers"
              :key="packager"
              :label="packager"
              :value="packager"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilterChange">筛选</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <el-table :data="filteredTableData" border style="width: 100%; margin-top: 20px;">
      <el-table-column prop="date" label="日期" width="120" />
      <el-table-column prop="packager" label="打包人" width="120" />
      <el-table-column prop="japanPostEMS" label="日本邮政EMS" width="120">
        <template #default="scope">
          <span class="shipment-value">{{ scope.row.japanPostEMS }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="dhl" label="DHL" width="100">
        <template #default="scope">
          <span class="shipment-value">{{ scope.row.dhl }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="airFreight" label="航空" width="100">
        <template #default="scope">
          <span class="shipment-value">{{ scope.row.airFreight }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="seaFreight" label="海运" width="100">
        <template #default="scope">
          <span class="shipment-value">{{ scope.row.seaFreight }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="japanDomestic" label="日本国内" width="120">
        <template #default="scope">
          <span class="shipment-value">{{ scope.row.japanDomestic }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="direct" label="直通" width="100">
        <template #default="scope">
          <span class="shipment-value">{{ scope.row.direct }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="directMail" label="直邮" width="100">
        <template #default="scope">
          <span class="shipment-value">{{ scope.row.directMail }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="total" label="发货总计" width="120">
        <template #default="scope">
          <span class="total-value">{{ scope.row.total }}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import * as XLSX from 'xlsx'

const dateRange = ref(['2024-08-01', '2024-08-14'])
const tableData = ref<any[]>([])

// 筛选表单
const filterForm = ref({
  packager: ''
})

// 员工姓名列表
const packagers = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十']

// 筛选后的数据
const filteredTableData = computed(() => {
  let filtered = tableData.value

  // 按打包人筛选
  if (filterForm.value.packager) {
    filtered = filtered.filter(item => item.packager === filterForm.value.packager)
  }

  return filtered
})

const generateEmployeeShipmentData = (startDate: string, endDate: string) => {
  const start = new Date(startDate)
  const end = new Date(endDate)
  const data: any[] = []
  
  let current = new Date(start)
  while (current <= end) {
    const month = current.getMonth() + 1
    const date = current.getDate()
    
    // 为每个员工生成数据
    packagers.forEach(packager => {
      const japanPostEMS = Math.floor(Math.random() * 50) + 10
      const dhl = Math.floor(Math.random() * 30) + 5
      const airFreight = Math.floor(Math.random() * 40) + 8
      const seaFreight = Math.floor(Math.random() * 25) + 3
      const japanDomestic = Math.floor(Math.random() * 35) + 6
      const direct = Math.floor(Math.random() * 20) + 4
      const directMail = Math.floor(Math.random() * 45) + 12
      
      const total = japanPostEMS + dhl + airFreight + seaFreight + japanDomestic + direct + directMail
      
      data.push({
        date: `${month}月${date}日`,
        packager,
        japanPostEMS,
        dhl,
        airFreight,
        seaFreight,
        japanDomestic,
        direct,
        directMail,
        total
      })
    })
    
    current.setDate(current.getDate() + 1)
  }
  
  return data
}

const handleDateChange = () => {
  updateData()
}

const handleFilterChange = () => {
  // 筛选逻辑已在 computed 中处理
}

const resetFilter = () => {
  filterForm.value.packager = ''
}

const updateData = () => {
  const data = generateEmployeeShipmentData(dateRange.value[0], dateRange.value[1])
  tableData.value = data
}

const exportExcel = () => {
  if (filteredTableData.value.length === 0) {
    ElMessage.warning('没有数据可导出')
    return
  }

  const exportData = filteredTableData.value.map(item => ({
    '日期': item.date,
    '打包人': item.packager,
    '日本邮政EMS': item.japanPostEMS,
    'DHL': item.dhl,
    '航空': item.airFreight,
    '海运': item.seaFreight,
    '日本国内': item.japanDomestic,
    '直通': item.direct,
    '直邮': item.directMail,
    '发货总计': item.total
  }))

  // 计算汇总数据
  const totals = {
    '日期': '汇总',
    '打包人': '全部员工',
    '日本邮政EMS': exportData.reduce((sum, item) => sum + item['日本邮政EMS'], 0),
    'DHL': exportData.reduce((sum, item) => sum + item['DHL'], 0),
    '航空': exportData.reduce((sum, item) => sum + item['航空'], 0),
    '海运': exportData.reduce((sum, item) => sum + item['海运'], 0),
    '日本国内': exportData.reduce((sum, item) => sum + item['日本国内'], 0),
    '直通': exportData.reduce((sum, item) => sum + item['直通'], 0),
    '直邮': exportData.reduce((sum, item) => sum + item['直邮'], 0),
    '发货总计': exportData.reduce((sum, item) => sum + item['发货总计'], 0)
  }

  // 将汇总行添加到数据顶部
  exportData.unshift(totals)

  const ws = XLSX.utils.json_to_sheet(exportData)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '员工发货统计')
  
  XLSX.writeFile(wb, `员工发货统计报表_${dateRange.value[0]}_${dateRange.value[1]}.xlsx`)
  ElMessage.success('导出成功')
}

onMounted(() => {
  updateData()
})
</script>

<style scoped>
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.report-header h3 {
  margin: 0;
  color: #303133;
}

.report-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-section {
  background-color: #f5f7fa;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.filter-section .el-form {
  margin: 0;
}

.filter-section .el-form-item {
  margin-bottom: 0;
  margin-right: 16px;
}

.shipment-value {
  color: #409eff;
  font-weight: bold;
}

.total-value {
  color: #67c23a;
  font-weight: bold;
}
</style>
